<template>
  <div class="wrap">
    <navTop></navTop>
    <navTwo></navTwo>
    <main>
      <h1>全部商品</h1>
      <div class="Allgoodsbox">
        <!-- <div></div> -->
        <div
          v-for="item in goods"
          :key="item.id"
          class="Allgoods"
          @click="goParticulars(item.id)"
        >
          <div class="imgbox">
            <img :src="item.s_goods_photos[0].path" alt="" />
          </div>
          <p>{{ item.name }}</p>
          <p>{{ item.desc }}</p>
          <p>¥{{ item.price }}</p>
        </div>
        <!-- <div class="box"></div> -->
      </div>
    </main>
    <bottomList></bottomList>
  </div>
</template>

<script>
import navTop from "../components/navtop";
import navTwo from "../components/navTwo";
import bottomList from "../components/bottomList";
export default {
  data() {
    return {
      Allgoods: [],
      goods: [],
    };
  },
  components: {
    navTop,
    navTwo,
    bottomList,
  },
  created() {
    //从sessionStorage拿到数组遍历
    this.Allgoods = JSON.parse(sessionStorage.getItem("headerClassify"));
    this.Allgoods.forEach((item) => {
      console.log(item);
      item.s_goods.forEach((item2) => {
        this.goods.push(item2);
      });
    });
    console.log(this.goods);
  },
  methods: {
    //去往商品详情页
    goParticulars(id) {
      this.$router.push({ path: `/particulars/${id}` });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  background-color: #f7f7f7;

  width: 100%;
  height: 100%;
  h1 {
    margin-top: 50px;
  }
  .Allgoodsbox {
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin:50px auto;

    .Allgoods {
      display: block;
      // justify-content: space-between;
      // flex-wrap: wrap;
      width: 20%;
      margin: 0 2.5%;
      // width: 290px;
      height: 400px;
      background-color: #fff;
      margin-top: 20px;
      transition: 0.5s;
      &:hover {
        box-shadow: 0 3px 15px gray;
        transform: translateY(-2px);
        cursor: pointer;
      }
      .imgbox {
        margin: 0 auto;
        padding-top: 50px;
        padding-bottom: 50px;
        width: 172px;
        height: 172px;
        img {
          height: 100%;
        }
      }
    }
    .box {
      width: 342px;
      height: 420px;
    }
  }
}
</style>
